<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false" :style="{margin:'0 -24px',padding:0}">
      <!-- 查询表单 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="5" :sm="24">
              <a-form-item label="村庄">
                <a-select :allowClear="true" v-model="queryParam.village_id" placeholder="请选择村庄" default-value="0">
                  <a-select-option v-for="(item, index) in villageChooseList" :key="index" :value="item.village_id">
                    {{ item.village_name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="消费商家">
                <a-input :allowClear="true" v-model="queryParam.shop_name" placeholder="消费商家"/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="持卡对象">
                <a-input :allowClear="true" v-model="queryParam.fullname" placeholder="请输入持卡对象"/>
              </a-form-item>
            </a-col>
            <a-col :md="7" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 表格 -->
      <a-spin :spinning="loading">
        <a-table :dataSource="cardListData" :columns="cardListColumns" rowKey="id">
        </a-table>
      </a-spin>
      <!-- 新增村民弹出模板 -->
      <a-modal v-model="addVisible" title="新增村民" @ok="handleOk" @cancel="handleCancel">
          <a-form v-bind="formLayout" v-if="mobileIsChecked == 0">
            <a-form-item label="手机号" required>
              <a-input placeholder="请输入手机号" v-model="formData.mobile" :maxLength="11" style="width:180px;margin-right: 20px;"/>
              <a-button type="primary" @click="handleCheck">检测手机号</a-button>
            </a-form-item>
          </a-form>
          <a-form v-bind="formLayout" v-else>
            <a-form-item label="手机号" required>
              <a-input placeholder="" v-model="userMes.mobile" :maxLength="11" style="width:180px;margin-right: 20px;" disabled/>
            </a-form-item>
            <a-form-item label="姓名" required>
              <a-input placeholder="" v-model="userMes.fullname" :maxLength="11" style="width:180px;margin-right: 20px;" disabled/>
            </a-form-item>
            <a-form-item label="所属村庄" required>
                <a-select :allowClear="true" v-model="userMes.village_id" placeholder="请选择村庄" default-value="0">
                  <a-select-option v-for="(item, index) in villageChooseList" :key="index" :value="item.village_id">
                    {{ item.village_name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
          </a-form>
      </a-modal>
      <!-- 删除弹窗 -->
      <a-modal v-model="delVisible" title="提示" @ok="handleDel" @cancel="handleDelCancel">
          <span>您确定要删除吗？一经删除，无法恢复！</span>
      </a-modal>
      <!-- 使用记录弹窗 -->
        <a-modal v-model="historyVisible" title="使用记录" @ok="handleOk" @cancel="handleCancel">
          <a-spin :spinning="loading">
            <a-table :dataSource="historyListData" :columns="historyListColumns" rowKey="id">
              <span slot="status" slot-scope="text, record">
                <template>
                  <span>{{ record.status == 1? '启用' : '禁用' }}</span>
                </template>
              </span>
              <span slot="action" slot-scope="text, record">
                <template>
                  <a @click="handleHistory(record)">使用记录</a>
                  <a-divider type="vertical"/>
                  <a @click="btnStatus(record)">{{ record.status == 1? '禁用' : '启用' }}</a>
                  <a-divider type="vertical"/>
                  <a @click="btnDel(record)">删除</a>
                </template>
              </span>
            </a-table>
          </a-spin>
        </a-modal>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { notification } from 'ant-design-vue'
import { checkMobile, getVillageList, addCard, updateStatus, getHistoryList } from '@/api/card'
export default {
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    }
    return {
      formData: {
        mobile: undefined
      },
      queryParam: {
        fullname: undefined,
        village_id: undefined,
        shop_name: undefined
      },
      villageList: [],
      addVisible: false,
      // 手机验证正则
      mobileRule: /^1[3456789]\d{9}$/,
      // 手机号检测状态
      mobileIsChecked: 0,
      // 表格数据
      cardListData: [],
      // 表头
      cardListColumns: [
        {
          title: 'ID',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '持卡对象',
          dataIndex: 'fullname',
          align: 'center'
        },
        {
          title: '所属村庄',
          dataIndex: 'village_name',
          align: 'center'
        },
        {
          title: '消费商家',
          dataIndex: 'shop_name',
          align: 'center'
        },
        {
          title: '核销时间',
          dataIndex: 'created_at',
          align: 'center'
        }
      ],
      // 检测手机号后获得的用户信息
      userMes: {},
      // 村庄列表
      villageChooseList: [],
      // 删除弹窗开关
      delVisible: false,
      // 卡片信息
      cardMes: {},
      // 加载开关
      loading: true,
      // 使用记录开关
      historyVisible: false,
      // 使用记录列表
      historyListData: [],
      // 使用记录表头
      historyListColumns: [
        {
          title: 'ID',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '持卡对象',
          dataIndex: 'fullname',
          align: 'center'
        },
        {
          title: '所属村庄',
          dataIndex: 'village_name',
          align: 'center'
        },
        {
          title: '消费商家',
          dataIndex: 'shop_name',
          align: 'center'
        },
        {
          title: '核销时间',
          dataIndex: 'created_at',
          align: 'center'
        }
      ],
      // 发卡状态
      cardStatus: [
        {
          label: '全部'
        },
        {
          value: 1,
          label: '启用中'
        },
        {
          value: 2,
          label: '禁用中'
        }
      ]
    }
  },
  methods: {
    // 获取发卡列表
    btnGetList () {
      const from = {
        page: 1,
        per_page: 10
      }
      getHistoryList(from).then(res => {
        this.cardListData = res.data
        this.loading = false
      })
    },
    // 新增村民-打开弹窗
    handleAdd () {
      this.addVisible = true
    },
    // 检测手机号
    handleCheck () {
      if (this.formData.mobile == undefined || this.formData.mobile == '') {
        notification.open({
        type: 'warning',
        message: '提示',
        description: '手机号不能为空！'
      })
      return
      }
      if (this.mobileRule.test(this.formData.mobile) == false) {
        notification.open({
          type: 'warning',
          message: '提示',
          description: '请输入正确格式手机号！'
        })
        return
      }
      const from = {
        mobile: this.formData.mobile
      }
      checkMobile(from).then(res => {
          this.mobileIsChecked = 1
          this.userMes.mobile = res.mobile
          this.userMes.fullname = res.fullname
          this.userMes.add_customer_id = res.customer_id
          console.log(this.res)
      })
      getVillageList().then(res => {
        console.log(res)
        this.villageList = res.list
      })
    },
    // 新增村民确认回调
    handleOk () {
      if (this.userMes.fullname == undefined || this.userMes.fullname == '') {
        notification.open({
          type: 'warning',
          message: '提示',
          description: '暂无该用户信息！'
        })
        return
      }
      if (this.userMes.village_id == undefined || this.userMes.village_id == '') {
        notification.open({
          type: 'warning',
          message: '提示',
          description: '请选择所属村庄！'
        })
        return
      }
      addCard(this.userMes).then(res => {
        this.addVisible = false
      })
      notification.open({
          type: 'success',
          message: '提示',
          description: '新增成功！'
      })
      setTimeout(() => {
        this.btnGetList()
      }, 1000)
    },
    // 新增村民关闭回调
    handleCancel () {
      this.mobileIsChecked = 0
      this.formData.mobile = undefined
      this.userMes = {}
    },
    // 点击删除链接
    btnDel (data) {
      this.delVisible = true
      this.cardMes = data
      console.log(data)
    },
    // 确认删除回调
    handleDel () {
      const from = {
        id: this.cardMes.id,
        status: 3
      }
      updateStatus(from).then(res => {
        notification.open({
          type: 'success',
          message: '提示',
          description: '删除成功！'
      })
      setTimeout(() => {
        this.delVisible = false
        this.btnGetList()
      }, 1000)
      })
    },
    // 取消删除回调
    handleDelCancel () {
      this.delVisible = false
    },
    // 启用与禁用
    btnStatus (data) {
      if (data.status == 1) {
        const from = {
          id: data.id,
          status: 2
        }
        updateStatus(from).then(() => {
          this.btnGetList()
        })
      } else {
        const from = {
          id: data.id,
          status: 1
        }
        updateStatus(from).then(() => {
          this.btnGetList()
        })
      }
    },
    // 使用记录窗口
    handleHistory (data) {
      console.log(data)
      this.historyVisible = true
      const from = {
        customer_id: data.customer_id,
        village_id: data.village_id,
        page: 1,
        per_page: 10
      }
      getHistoryList(from).then(res => {
        console.log(res)
        this.historyListData = res.data
      })
    },
    // 查询
    handleSearch () {
      console.log(this.queryParam)
      const from = {
        ...this.queryParam,
        page: 1,
        per_page: 10
      }
      getHistoryList(from).then(res => {
        this.cardListData = res.data
        this.loading = false
      })
    },
    // 获取全部村庄
    getAllVillage () {
      getVillageList().then(res => {
        this.villageChooseList = res.list
        console.log(res)
      })
    },
    // 重置
    handleReset () {
      this.btnGetList()
    }
  },
  mounted () {
    this.btnGetList()
    this.getAllVillage()
  }
}
</script>
